<template>
	<view class="" style="width:95vw;padding-left: 5vw;padding-top: 20rpx;">
		<u-steps :direction="'column'">
			<u-steps-item  v-for="(item, index) in recordList" nodeTop="2"  :key="index">
				<!-- 此处自定义了左边内容，用一个图标替代 -->

				<template  slot="icon">
					<view v-if="item.statusIndex>2&&index==0" class="u-node" style="background: #19be6b;">		
						<!-- 此处为uView的icon组件 -->
						<u-icon :name="iconList[item.statusIndex]" color="#fff" :size="24"></u-icon>
					</view>
					
					<view v-else-if="item.statusIndex>2" class="u-node" style="background: #ddd;">
						<!-- 此处为uView的icon组件 -->
						<u-icon :name="iconList[item.statusIndex]" color="#fff" :size="24"></u-icon>
					</view>
					<!-- 此处为uView的icon组件 -->
					<view v-else class="u-node" style="background: #ddd;">	
						<u-icon :name="iconList[item.statusIndex]" color="#fff" :size="24"></u-icon>
					</view>		
				</template>

				<template slot="desc">
					<view >
						<view v-if="item.statusIndex>2" class="u-order-title" style="margin-bottom: 30rpx;"> 
							{{item.statusTitle}} 
						</view>
						<view v-if="item.statusIndex!=3||(item.operator&&item.operator.length>0)"  class="u-order-desc">
							【{{item.statusTitle}}】{{item.channel?'报备渠道':'置业顾问'}}: {{item.operator}} {{item.reason&&item.reason.length>0?','+item.reason:''}}
						</view>
						<view v-if="item.statusIndex!=3||(item.operator&&item.operator.length>0)" class="u-order-time"> {{item.createTime}} </view>
					</view>
				</template>
			</u-steps-item>
		</u-steps>
	</view>

</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null

    
	export default {
		data() {
			return {
				iconList:[
					'bell-fill',
					'warning-fill',
					'plus-circle-fill',
					'pushpin-fill',	//未到访
					'account-fill',	//到访
					'heart-fill',//认筹
					'rmb-circle-fill',//认购
					'file-text-fill'//签约
				],
				title:[
					'报备',
					'过期',
					'无效',
					'未到访',
					'到访',
					'认筹',
					'认购',
					'签约',		
				],	
					
				mapList:[
					{statusIndex:0, status: "REPORT"},
					{statusIndex:1, status: "EXPORT_EXPIRED"},
					{statusIndex:2, status: "EXPORT_INVALID"},
					{statusIndex:3, status: "NOT_VISITED"},
					{statusIndex:4, status: "VISITED"},
					{statusIndex:5, status: "DEPOSIT"},
					{statusIndex:6, status: "ORDERED"},
					{statusIndex:7, status: "DONE"},
				],
					
					
		
				recordList:[
					// {
					// 	name: "",
					// 	info: "",
					// 	status: 3,
					// 	time: '2019-05-08 12:12'
					// },
					// {
					// 	name: "渠道贝壳张三",
					// 	info: "客户报备到签到时间不足！",
					// 	status: 1,
					// 	time: '2019-05-08 12:12'
					// }
					
				]

			};
		},
        
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo, 
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        
        onLoad(options) {
            that = this;
            console.log("list:",options.list)
			if (options.list&&JSON.parse(options.list)){
				var list = JSON.parse(options.list)	
				for (var i in list){
					for (var j in this.mapList){
						if (list[i].status == this.mapList[j].status){
							list[i].statusIndex = this.mapList[j].statusIndex
						}
					}	
				}
				var index = -1
				var isAdd = false
				for (var i in list){
					// if (list[i].statusIndex==3){
					// 	isAdd = false
					// 	break;
					// }
					if (list[i].statusIndex<3){
						index = i
						isAdd = true
						break;
					}
				}
				if (isAdd){
					list.splice(index,0, {
						statusTitle: '未到访',
						statusIndex: 3,
					})
				}
				this.recordList = list
				console.log("list:", this.recordList)
				
				/* if (list[0].statusIndex < 3){
					this.recordList = [{
						statusTitle: '未到访',
						statusIndex: 3,
					},
					...list
					]
				}else{
					
					this.recordList = list
				} */
			}	
        },
        onShow() {
      
        },
        methods:{ 
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId',"setOrigin"]),
    
            getActivityDetail() {
                let that = this
                api.getActivityDetail({
                    param: {
                        id: that.activityId,
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {  
                    
                    }
                })
            },
        }
	}
</script>

<style lang="scss" scoped>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
		margin-top: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>